<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
<!-- 省市样式 -->
		<link href="../../css/mui.picker.css" rel="stylesheet" />
<!-- 隐藏 -->
		<link href="../../css/mui.poppicker.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- bootstrap -->
<!-- <link href="../../../plugin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" /> -->
<!-- 构建图表 -->
<script src="../../../plugin/ECharts/dist/echarts.js"></script>
	<title>天气预报</title>
	<!-- 高德文档位置：https://lbs.amap.com/api/webservice/gettingstarted -->
	<!-- nowAPI提供的天气图标库，根据下载的压缩包分析图片：http://api.k780.com/upload/weather/n1/0.png -->
	<style>
		.mui-btn {
			font-size: 16px;
			padding: 8px;
			margin: 3px;
		}
		h5.mui-content-padded {
			margin-left: 3px;
			margin-top: 20px !important;
		}
		h5.mui-content-padded:first-child {
			margin-top: 12px !important;
		}
		.ui-alert {
			text-align: center;
			padding: 20px 10px;
			font-size: 16px;
		}
		.my_float{
			float: left;
		}
		.clear_flot{
			clear: both;
		}
	</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">天气预报</h1>
</header>
<div class="mui-content">
<!-- 图表 -->
<div class="mui-card">
	<div class="mui-card-header"><h3 id="city">CITY</h3><h4 id="province">PROVINCE</h4><span id="adcode">ADCODE</span></div>
	<div class="mui-card-content">
		<div class="mui-card-content-inner">
			<!-- 图表展示 -->
    		<div id="main" style="width: 100%;height:330px;"></div>
		</div>
	</div>
	<div class="mui-card-footer"><p>数据时间：<span id="reporttime">TIME</span></p></div>
</div>
<!-- 第一天 -->
<div class="mui-card">
	<div class="mui-card-header">
		<h4><span id="dayweather_1">DAY</span>/<span id="nightweather_1">NIGHT</span></h4>
		<p>周<span id="week_1">WEEK</span></p>
	</div>
	<div class="mui-card-content">
		<div class="mui-card-content-inner">
			<div class="my_float">
				<img id="img_1" src="http://api.k780.com/upload/weather/d1/0.png">
				<img id="img_11" src="http://api.k780.com/upload/weather/d1/0.png">
			</div>
			<div class="">
				<!-- <p>可以插入其他文本</p> -->
			</div>
			<div class="clear_flot"></div>
		</div>
	</div>
	<div class="mui-card-footer">
		<p><span id="daytemp_1"></span>℃/<span id="nighttemp_1"></span>℃</p>
		<p><span id="daywind_1"></span>风&nbsp;<span id="daypower_1"></span>&nbsp;级 /&nbsp;<span id="nightwind_1"></span>风&nbsp;<span id="nightpower_1"></span>&nbsp;级</p>
	</div>
</div>
<!-- 第二天 -->
<div class="mui-card">
	<div class="mui-card-header">
		<h4><span id="dayweather_2">DAY</span>/<span id="nightweather_2">NIGHT</span></h4>
		<p>周<span id="week_2">WEEK</span></p>
	</div>
	<div class="mui-card-content">
		<div class="mui-card-content-inner">
			<img id="img_2" src="http://api.k780.com/upload/weather/d1/0.png">
			<img id="img_22" src="http://api.k780.com/upload/weather/d1/0.png">
		</div>
	</div>
	<div class="mui-card-footer">
		<p><span id="daytemp_2"></span>℃/<span id="nighttemp_2"></span>℃</p>
		<p><span id="daywind_2"></span>风&nbsp;<span id="daypower_2"></span>&nbsp;级 /&nbsp;<span id="nightwind_2"></span>风&nbsp;<span id="nightpower_2"></span>&nbsp;级</p>
	</div>
</div>
<!-- 第三天 -->
<div class="mui-card">
	<div class="mui-card-header">
		<h4><span id="dayweather_3">DAY</span>/<span id="nightweather_3">NIGHT</span></h4>
		<p>周<span id="week_3">WEEK</span></p>
	</div>
	<div class="mui-card-content">
		<div class="mui-card-content-inner">
			<img id="img_3" src="http://api.k780.com/upload/weather/d1/0.png">
			<img id="img_33" src="http://api.k780.com/upload/weather/d1/0.png">
		</div>
	</div>
	<div class="mui-card-footer">
		<p><span id="daytemp_3"></span>℃/<span id="nighttemp_3"></span>℃</p>
		<p><span id="daywind_3"></span>风&nbsp;<span id="daypower_3"></span>&nbsp;级 /&nbsp;<span id="nightwind_3"></span>风&nbsp;<span id="nightpower_3"></span>&nbsp;级</p>
	</div>
</div>
<!-- 第四天 -->
<div class="mui-card">
	<div class="mui-card-header">
		<h4><span id="dayweather_4">DAY</span>/<span id="nightweather_4">NIGHT</span></h4>
		<p>周<span id="week_4">WEEK</span></p>
	</div>
	<div class="mui-card-content">
		<div class="mui-card-content-inner">
			<img id="img_4" src="http://api.k780.com/upload/weather/d1/0.png">
			<img id="img_44" src="http://api.k780.com/upload/weather/d1/0.png">
		</div>
	</div>
	<div class="mui-card-footer">
		<p><span id="daytemp_4"></span>℃/<span id="nighttemp_4"></span>℃</p>
		<p><span id="daywind_4"></span>风&nbsp;<span id="daypower_4"></span>&nbsp;级 /&nbsp;<span id="nightwind_4"></span>风&nbsp;<span id="nightpower_4"></span>&nbsp;级</p>
	</div>
</div>




	<div class="mui-content-padded">
		<div class="panel panel-default">
	<div class="panel-heading panel-success">
		<h4 class="panel-title"></h4>
		
		
	</div>

	<div class="panel-body">
		
	</div>
	<div class="panel-footer"><h4 class="panel-title"></h4></div>
</div>


		<button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>挑选地址</button>
		<div id='cityResult' class="ui-alert"></div>
	</div>
</div>



	<!-- 图表展示 -->
    <!-- <div id="main" style="width: 800px;height:500px;"></div> -->

<!-- MUI主文件 -->
<script src="../../js/mui.min.js"></script>
<!-- 选择插件 -->
<script src="../../js/mui.picker.js"></script>
<script src="../../js/mui.poppicker.js"></script>
<!-- 二级城市列表 -->
<script src="../../js/city.data.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap -->
<!-- <script src="../../../plugin/js/bootstrap.min.js"></script> -->
<script type="text/javascript">
(function($, doc) {
	$.init();
	$.ready(function() {
		/**
		 * 获取对象属性的值
		 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
		 * @param {Object} obj 对象
		 * @param {String} param 属性名
		 */
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		jQuery.ajax({
   		    url: 'https://api.map.baidu.com/location/ip',   //百度
   		    type: 'get',
   		    dataType: 'jsonp',
   		    data: {
   		        ak: 'kIhQGVxyVnTZ6hMEsLSGCxyVH1ZddTGO'  //百度位置信息
   		    },
   		    success: function (data) {
   		        sel_weather(data.content.address_detail.city);  //百度位置
   		    },
   		    error: function (data){
   		        alert("抱歉，获取位置信息失败！");
   		        console.log("错误信息："+JSON.stringify(data));
   		    }
   		});
		//-----------------------------------------
		//级联示例
		var cityPicker = new $.PopPicker({
			layer: 2
		});
		cityPicker.setData(cityData);
		var showCityPickerButton = doc.getElementById('showCityPicker');
		var cityResult = doc.getElementById('cityResult');
		showCityPickerButton.addEventListener('tap', function(event) {
			cityPicker.show(function(items) {
				// cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;
				sel_weather(items[1].text);
				//返回 false 可以阻止选择框的关闭
				//return false;
			});
		}, false);
	});
})(mui, document);
    
    function sel_weather(city_name){
        $.ajax({
            url: 'https://restapi.amap.com/v3/weather/weatherInfo',
            type: 'get',
            dataType: 'json',
            data: {     //可选：extensions： base【返回实况天气】 all【预报天气】
                key: 'cbb0938cf00887878777cba8947cacfd',
                city: city_name,
                extensions: 'all'  //查询全部天气
            },
            success: function (data) {
                $('#city').text(data.forecasts[0].city);    //DOM操作
                $('#province').text(data.forecasts[0].province);
                $('#adcode').text(data.forecasts[0].adcode);
                $('#reporttime').text(data.forecasts[0].reporttime);
                var casts = data.forecasts[0].casts;    //取出天气数组
                var week_arr = ["一","二","三","四","五","六","日"];   //日期数组
                var myDate = new Date().getHours();
                var high_arr = [];	//高气温
                var low_arr = [];	//低气温
                var unit_arr = [];	//单位
                for(var i = 1;i <= casts.length;i ++){
                    // if(myDate > 18 || myDate < 6){      //昼夜判断，如果时间大于18点或时间小于6点，则夜
                        $('#img_' + i + "" + i).attr("src",weather_icon_n[casts[i - 1].nightweather]); //夜间天气
                    // }else{
                        $('#img_' + i).attr("src",weather_icon_d[casts[i - 1].dayweather]);   //白天天气
                        // console.log($('#img_' + i + "" + i));
                    // }
                    $('#dayweather_' + i).text(casts[i - 1].dayweather);        //白天天气
                    $('#nightweather_' + i).text(casts[i - 1].nightweather);    //夜间天气
                    $('#date_' + i).text(casts[i - 1].date);                    //日期
                    var week_change = casts[i - 1].week;    //获取当前循环的周，数值类型
                    $('#week_' + i).text(week_arr[week_change - 1]);            //设置到周上
                    $('#daytemp_' + i).text(casts[i - 1].daytemp);              //日间气温
                    $('#nighttemp_' + i).text(casts[i - 1].nighttemp);          //夜间气温
                    $('#daywind_' + i).text(casts[i - 1].daywind);              //白天风向风力
                    $('#daypower_' + i).text(casts[i - 1].daypower);
                    $('#nightwind_' + i).text(casts[i - 1].nightwind);          //夜晚风向风力
                    $('#nightpower_' + i).text(casts[i - 1].nightpower);
                    high_arr[i - 1] = casts[i - 1].daytemp;	//高气温
                    low_arr[i - 1] = casts[i - 1].nighttemp;//低气温
                    unit_arr[i - 1] = week_arr[week_change - 1];//单位
                }	
                draw_weather_line(high_arr,low_arr,unit_arr);
            },
            error: function (data){
                alert("抱歉，天气查询失败！");
                console.log("错误信息："+JSON.stringify(data));
            }
        });
    }

    var weather_icon_d = {
        "晴": "http://api.k780.com/upload/weather/d1/0.png",
        "多云": "http://api.k780.com/upload/weather/d1/1.png",
        "阵雨": "http://api.k780.com/upload/weather/d1/3.png",
        "雷阵雨": "http://api.k780.com/upload/weather/d1/4.png",
        "阴": "http://api.k780.com/upload/weather/d1/2.png",
        "雨夹雪": "http://api.k780.com/upload/weather/d1/6.png",
        "小雨": "http://api.k780.com/upload/weather/d1/7.png",
        "中雨": "http://api.k780.com/upload/weather/d1/8.png",
        "大雨": "http://api.k780.com/upload/weather/d1/9.png",
        "大到暴雨": "http://api.k780.com/upload/weather/d1/10.png",
        "特大暴雨": "http://api.k780.com/upload/weather/d1/11.png",
        "阵雪": "http://api.k780.com/upload/weather/d1/13.png",
        "小雪": "http://api.k780.com/upload/weather/d1/14.png",
        "中雪": "http://api.k780.com/upload/weather/d1/15.png",
        "大雪": "http://api.k780.com/upload/weather/d1/16.png",
        "大到暴雪": "http://api.k780.com/upload/weather/d1/17.png",
        "龙卷风": "http://api.k780.com/upload/weather/d1/20.png",
        "扬沙": "http://api.k780.com/upload/weather/d1/29.png",
        "雾霾": "http://api.k780.com/upload/weather/d1/53.png"
    };
    var weather_icon_n = {
        "晴": "http://api.k780.com/upload/weather/n1/0.png",
        "多云": "http://api.k780.com/upload/weather/n1/1.png",
        "阵雨": "http://api.k780.com/upload/weather/n1/3.png",
        "雷阵雨": "http://api.k780.com/upload/weather/n1/4.png",
        "阴": "http://api.k780.com/upload/weather/n1/2.png",
        "雨夹雪": "http://api.k780.com/upload/weather/n1/6.png",
        "小雨": "http://api.k780.com/upload/weather/n1/7.png",
        "中雨": "http://api.k780.com/upload/weather/n1/8.png",
        "大雨": "http://api.k780.com/upload/weather/n1/9.png",
        "大到暴雨": "http://api.k780.com/upload/weather/n1/10.png",
        "特大暴雨": "http://api.k780.com/upload/weather/n1/11.png",
        "阵雪": "http://api.k780.com/upload/weather/n1/13.png",
        "小雪": "http://api.k780.com/upload/weather/n1/14.png",
        "中雪": "http://api.k780.com/upload/weather/n1/15.png",
        "大雪": "http://api.k780.com/upload/weather/n1/16.png",
        "大到暴雪": "http://api.k780.com/upload/weather/n1/17.png",
        "龙卷风": "http://api.k780.com/upload/weather/n1/20.png",
        "扬沙": "http://api.k780.com/upload/weather/n1/29.png",
        "雾霾": "http://api.k780.com/upload/weather/n1/53.png"
     }
	//画统计图表，传入高温低温和日期单位
    function draw_weather_line(high_arr,low_arr,unit_arr){
    	//构建图表
    	var myChart = echarts.init(document.getElementById('main'),'dark');
    	option = {
    		title: {		//图表标题
    	        text: '气温变化'
    	    },
    	    tooltip: {		//悬浮X轴提示
        		trigger: 'axis'
    		},
    		legend: {		//切换线条显示
        		data:['高气温','低气温']
    		},
    		xAxis: {
    			name: '星期',
    		    type: 'category',
    		    data: unit_arr
    		},
    		yAxis: {
    			name: '摄氏度',
    		    type: 'value'
    		},
    		series: [{	
    			name: '高气温',
    		    data: high_arr,
    		    type: 'line',
    		    smooth: true
    		},{
    			name: '低气温',
    		    data: low_arr,
    		    type: 'line',
    		    smooth: true
    		}]
		};
		myChart.setOption(option);
	}



</script>
</body>
</html>